<template>
  <div class="homeRight">
      <div class="mp3">
        <!-- <iframe frameborder="yes" border="0" marginwidth="0" marginheight="0" width=320 height=110 src="//music.163.com/outchain/player?type=0&id=7521888024&auto=1&height=90"></iframe> -->
      </div>
      <div class="mymessage f1">
        <p>
          &nbsp;<i class="el-icon-info" style="color: orange"></i
          >&nbsp;&nbsp;个人信息
        </p>
        <div>
        <ul>
          <li v-for="(item, index) in messageData.messageTest" :key="index">
            {{ item }}
          </li>
        </ul>
        </div>
      </div>
      <div class="wechat f1">
        
        <p>
          &nbsp;<i class="el-icon-info" style="color: orange"></i
          >&nbsp;&nbsp;添加微信与我联系
        </p>

        <div>
          <img src="@assets/images/wechat.jpg" alt="" />
        </div>
      </div>
    </div>
</template>

<script>
export default {
    data() {
    return {
      messageData: {
        messageTest: [
          "●  博主是一个专注于前端开发的程序员~",
          "●  主要以vue全家桶为主~ 以及精通vue2,vue3,TypeScrpt等技术,熟练使用node.js",
          "●  2022年目标拿下react~",
          "●  技术之路任重而道远,让我们一起加油~",
          "●  关于前端技术,可以联系博主,知而不言哦~",
        ],
      },
    };
  },
}
</script>

<style lang="less" scoped>
 .homeRight {
  width: 300px;
  .mp3{
    margin-left: -10px;
  }
  .mymessage {
    p {
      font-size: 20px;
      display: flex;
      align-items: center;
      padding: 10px 5px;
      height: 30px;
      border-bottom: 1px solid #eee;
      i {
        margin-top: 2px;
        font-size: 20px;
      }
      
    }
    ul{
      padding: 20px 15px;
      li {
        margin-bottom: 5px;
        line-height: 25px;
        font-size: 15px;
        color: #333;
      }
      }
      div{
        background-color: #efefef;
        // background: linear-gradient(to top, #f1c360 0%, #d4ba8a 50%, #f5e342 100%);
      }
  }
  .wechat {
    p {
      font-size: 20px;
      display: flex;
      align-items: center;
      padding: 10px 5px;
      height: 30px;
      border-bottom: 1px solid #eee;
      i {
        margin-top: 2px;
        font-size: 20px;
      }
      
    }
    img {
      width: 280px;
      height: 350px;
    }
    div{
        background-color: #fff;
      }
  }
}
.f2 {
  background-color: #fff;
  border: 1px dashed #999;
  border-radius: 8px;
  margin-bottom: 30px;
}
</style>